<!DOCTYPE html>
<html lang="zh">

<head>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <meta name="viewport" content='width=device-width, initial-scale=1' charset="utf-8" />
  <title>登录</title>
  <link href="https://cdn.jsdelivr.net/npm/ionicons@^4.0.0/dist/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css" rel="stylesheet" type="text/css">
  <style>
    input {
      font-size: 16px;
    }

    #q-app {
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }

    #q-app {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    #q-app::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #f5f5f5;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div id="q-app">
    <q-layout view="hHh lpR fFf">
      <q-header class="bg-primary text-white shadow-2">
        <q-toolbar>
          <q-btn type="a" href="/" flat round dense icon="ion-home" class="q-mr-sm">
          </q-btn>
          <q-separator dark vertical inset></q-separator>
          <q-toolbar-title stretch flat>登录</q-toolbar-title>
          <q-btn v-if="loginSuccess" flat round dense icon="ion-log-out" @click="handleLogout" />
        </q-toolbar>
      </q-header>

      <q-page-container>
        <q-page padding>
          <div class="row justify-center q-my-md">
            <div class="col-xs-10 col-md-8">
            </div>
          </div>
          <div class="row justify-center q-my-md">
            <div class="col-xs-10 col-md-8">
              <q-banner v-if="loginSuccess" inline-actions class="text-white bg-primary">
                登录成功，当前登录用户为 {{ loginSuccess }}，可在右上角退出登录
              </q-banner>
              <q-banner v-if="loginError" inline-actions class="text-white bg-red">
                {{ loginError }}
              </q-banner>
            </div>
          </div>
          <div class="row justify-center q-my-md">
            <div class="col-xs-10 col-md-8">
              <q-form v-if="!loginSuccess" @submit="handleSubmit" @reset="handleReset" class="q-gutter-md">
                <q-input clearable filled v-model="form.username" label="用户名" lazy-rules
                  :rules="[ val => val && val.length > 0 || '请输入用户名']"></q-input>

                <q-input clearable filled type="password" v-model="form.password" label="密码" lazy-rules
                  :rules="[ val => val && val.length > 0 || '请输入密码']"></q-input>

                <div class="row q-my-md justify-between">
                  <div class="col-xs-12 col-sm-6 q-pa-xs">
                    <q-btn class="full-width" label="登录" type="submit" color="primary"></q-btn>
                  </div>
                  <div class="col-xs-12 col-sm-6 q-pa-xs">
                    <q-btn class="full-width" label="重置" type="reset" color="primary"></q-btn>
                  </div>
                </div>
              </q-form>
            </div>
          </div>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/lang/zh-hans.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/icon-set/ionicons-v4.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
<script>
  Quasar.iconSet.set(Quasar.iconSet.ioniconsV4)
</script>
<script>
  new Vue({
    el: '#q-app',
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '必须输入您的用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '必须输入您的密码', trigger: 'blur' },
          ],
        },
        loginSuccess: false,
        loginError: false
      }
    },

    created() {
      this.loadUser();
    },

    methods: {
      loadUser() {
        const token = localStorage.getItem('token');
        if (token) {
          axios.get('/api/user/me', {
            headers: {
              'X-Token': token
            }
          }).then(r => r.data).then(res => {
            if (res.code === -1) {
              localStorage.removeItem('token')
            } else {
              this.loginSuccess = res.data.username;
            }
          })
        }

      },

      handleSubmit() {
        axios.post('/api/user/login', {
          username: this.form.username,
          password: this.form.password
        }).then(r => r.data).then(res => {

          if (res.code === -1) {
            this.loginSuccess = false;
            this.loginError = res.msg;
          } else {
            this.loginSuccess = res.data.username;
            localStorage.setItem('token', res.data.token);
            this.handleReset();
          }
        })

      },

      handleReset() {
        this.form.username = '';
        this.form.password = '';
      },

      handleLogout() {
        localStorage.removeItem('token');
        this.loginSuccess = false;
      }
    }
  })
</script>

</html>
